<template>
  <div class="jinghebox" id="jinghebox">
    <div class="left">
      <div class="top">
        <div class="buttons" style="display: none;">
        <!-- <div class="buttons"> -->

          <MySelect :options="options1" :myname.sync="name1" text="材料"></MySelect>
          <MySelect :options="options2" :myname.sync="name2" text="产业链级别"></MySelect>
          <MySelect :options="dt" :myname.sync="name3" text="细分行业" v-if="dt"></MySelect>
          <!-- <MySelect :options="dt2" :myname.sync="name4" text="地域" v-if="dt2"></MySelect> -->
          <el-switch v-model="name6">重点外企</el-switch>

        </div>
        <div class="search" >
          <el-input
            v-model="search"
            placeholder=""
          ></el-input>
          <el-button type="primary" @click="goSearch">
            <img src="/images/jinghe/right/搜索@2x.png" >
          </el-button>
        </div>
      </div>
      <div class="bottom">
        <tubiao v-show="isXT"></tubiao>
        <tubiao2 v-show="!isXT"></tubiao2>
        <!-- <tubiao></tubiao> -->
      </div>
    </div>
    <div class="right">
      <!-- 给子路由传参 -->
      <router-view></router-view>
      <!-- <right1></right1>
      <right2></right2> -->
    </div>

  </div>
</template>

<script>
import tubiao from './components/tubiao.vue'

import tubiao1 from './components/tubiao1.vue'
import tubiao2 from './components/tubiao2.vue'

// import right1 from './right1/right1.vue'
import MySelect from './components/MySelect.vue'
import { ue } from '../../assets/UE'
// import right1 from './right1/right1.vue'
// import right2 from './right2/right2.vue'

export default {
  name: '',
  components: {
    tubiao,
    tubiao1,
    tubiao2,
    // right1,
    MySelect,
    // right2
  },
  props: {},
  data () {
    return {
      name1: '稀土永磁',
      isXT: true,
      name2: '全部',
      name3: '',
      name33: '',
      // name4: false,
      name5: '',
      name6: 'false',
      data1: ['轻稀土','重稀土'],
      data2: ['深加工设备', '检测设备', '钐钴永磁', '钕铁硼永磁', '高丰度稀土永磁', '铁氮永磁', '稀土铁氮永磁'],
      data3: ['磁组件', '家用电器', '交通装备', '3C电子', '高端装备'],
      options1: [{
        value: '稀土永磁',
        label: '稀土永磁'
      },{
        value: '新材料',
        label: '新材料'
      }],
      options2: [{
        value: '全部',
        label: '全部'
      }, {
        value: '上游',
        label: '上游'
      },  {
        value: '中游',
        label: '中游'
      }, {
        value: '下游',
        label: '下游'
      }],
      options3: [],
      search: '',
      xfly: {},
      dt: null,
      dt2: null

    }
  },
  computed: {
  },
  watch: {
    name1: function (){
      console.log(this.name1)
      if(this.name1==='稀土永磁'){
        this.isXT = true
        this.$router.push({
          name: 'jingheRight1',
          query: {
            cyljb: '全部',
          }
        })
      }else if(this.name1==='新材料'){
        this.isXT = false
        this.name5 = '全部'

        this.$router.push({
          name: 'jingheRight5',
          query: {
            industry: '全部',
          }
        })
      }
    },
    name2: function (){
      console.log('监听 name2-',this.name2)
      this.dt = this.xfly[this.name2]
      this.name3 = ''
      if(this.name2 != '全部'){
        this.$router.push({
          name: 'jingheRight2',
          query: {
            cyljb: this.name2
          }
        })
      }else{
        this.$router.push({
          name: 'jingheRight1',
          query: {
            cyljb: this.name2,
          }
        })
      }
    },
    name3: function (){
      console.log('监听 name3-',this.name3)
      if(this.name3){
        this.$router.push({
          name: 'jingheRight3',
          query: {
            xfly: this.name3,
            cyljb: this.name2
          }
        })
      }
      // this.getLoc()
    },
  },
  created () {},
  mounted () {
    // this.$router.push({
    //   name: 'jingheRight5',
    //   query: {
    //     industry: '',
    //   }
    // })
    // console.log(this.dt, this.dt2)
    this.dealXFLY()
    console.log(this.name2)
    this.dt = this.name2 ? this.xfly[this.name2] : this.xfly['全部']
    // 竞争合作
    ue.interface.name0 = (data) => {
      let jinghebox = document.getElementById('jinghebox')
      jinghebox.style.backgroundColor = '#090a13'
      this.$store.commit('setRequest_type',data)
    }
    ue.interface.name1 = (data) => {
      let jinghebox = document.getElementById('jinghebox')
      jinghebox.style.backgroundColor = '#090a13'
      // 如果不触发监听 值一样
      if(this.name1 == data){
        if(this.name1==='稀土永磁'){
          this.isXT = true
          this.$router.push({
            name: 'jingheRight1',
            query: {
              cyljb: '全部',
            }
          })
        }else if(this.name1==='新材料'){
          this.isXT = false
          this.name5 = '全部'
          console.log(this.name5);
          this.$router.push({
            name: 'jingheRight5',
            query: {
              industry: '全部',
            }
          })
        }
      }
      this.name1 = data
      this.name3 = '' // name2变化，需要置name3为空

    }
    // 稀土永磁
    // 上中下游
    ue.interface.name2 = (data) => {
      this.name2 = data
      this.name3 = '' // name2变化，需要置name3为空
    }
    // 细分行业
    ue.interface.name3 = (data) => {
      this.name3 = data
    }
    // 地域
    ue.interface.name33 = (data) => {
      this.name33 = data
      this.$router.push({
        name: 'jingheRight4',
        query: {
          zdwq: data,
          name3: this.name3
        }
      })
    }

    // 新材料
    // 细分类别
    ue.interface.name5 = (data) => {
      let jinghebox = document.getElementById('jinghebox')
      jinghebox.style.backgroundColor = '#090a13'
      // 接收 true/false
      this.name5 = data
      this.$router.push({
        name: 'jingheRight2',
        query: {
          industry: data,
        }
      })
    }
    // 重点外企
    ue.interface.name6 = (data) => {
      let jinghebox = document.getElementById('jinghebox')
      jinghebox.style.backgroundColor = '#090a13'
      // 接收 true/false
      this.name6 = data
      console.log('重点外企',this.name6,this.name5)
      if(this.name6=='true'){
        // 细分类别不为全部
        if(this.name5!='全部'){
          this.$router.push({
            name: 'jingheRight6',
            query: {
              industry: this.name5,
              change1: this.name5
            }
          })
        // 细分类别为全部
        }else{
          jinghebox.style.backgroundColor = 'transparent'
          this.$router.push({
            name: 'jingheRight7',
            query: {
              change1: '全部'
            }
          })
        }
      }else{
        if(this.name5!='全部'){
          this.$router.push({
            name: 'jingheRight2',
            query: {
              industry: this.name5,
              change2: this.name5
            }
          })
        }else{
          this.$router.push({
            name: 'jingheRight5',
            query: {
              industry: '全部',
            }
          })
        }

      }
    }
  },
  methods: {
    goSearch() {
      console.log('search: ',this.search)
    },
    dealXFLY() {
      this.xfly['上游'] = this.data1
      this.xfly['中游'] = this.data2
      this.xfly['下游'] = this.data3
      this.xfly['全部'] = this.data1.concat(this.data2, this.data3)
      // console.log(this.xfly)
    },
    // async getLoc(){
    //   await this.$api.get('/es/jsc/cyjh_get_zdwqqy',{xfhy: this.name3})
    //     .then((response) => {
    //       let x = response.data
    //       console.log(x)
    //       this.dt2 = x["其他国家列表"]
    //     })
    // }

  }
}
</script>

<style lang="stylus" scoped>
.jinghebox {
  display: flex;
  font-family: 'SourceHanSansCN-Regular' !important;
  z-index: 1;
  position: relative;
  box-sizing: border-box;
  width: 1800px;
	// height: 982px;
	height: 962px;
  background-color: #090a13;
  
  //24
  padding: 0px 10px 0px 24px;
  // padding-top: 24px;
  // padding-bottom: 10px;
  justify-content: space-between;
  
  .left {
    // visibility: hidden;
    position: relative;
    padding-top: 73px;
    box-sizing: border-box;
    // width: 607px;
    width: 1252px;
    height: 100%;
    // border: 1px solid #fff;
    .top{
      display: flex;
      justify-content: space-between;
      padding-right: 110px;
      .buttons {
        display: flex;
      }  
    }
    .bottom {
      position: absolute;
      // top: 120px;
      top: 126px;

      right: 0;
    }
  }

  .right {
    width: 420px;
    height: 100%;
    // border: 1px solid #fff;

  }
}
  .search {
    width: 514px;
    border-radius: 4px;
    box-sizing: border-box;
    // border: 1px solid #0091FF;
    display: flex;
    height: 42px;
    display: none;
    >>> .el-input {
      height: 100%;
      .el-input__inner {
        font-family: 'SourceHanSansCN-Regular' !important;
        background-color: #011A40;
        border: 0;
        font-size: 17px;
        color: #FFFFFF;
        letter-spacing: 3px;
        line-height: 24px;
        font-weight: bold;
      }
    }
    .el-button {
      width: 68px;
      height: 40px;
      border-radius: 4px;
      background-color: #050f20;
      position relative;
      img {
        width: 68px;
        height: 40px;
        position absolute;
        top: -1px;
        left: -3px;
      }
    }
  }
</style>
